import React, { PureComponent } from 'react';
import { Table, Alert, Divider } from 'antd';
import { Link } from 'dva/router';
import styles from './RoomListTable.less';

class RoomListTable extends PureComponent {
  state = {
    selectedRowKeys: [],
  };

  componentWillReceiveProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      this.setState({
        selectedRowKeys: [],
      });
    }
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }

    this.setState({ selectedRowKeys });
  }

  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  }

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  }

  // remove click handler
  handleRemoveClick = ({ id }) => {
    this.props.onRemove(id);
  }

  // update click handler
  handleUpdateClick = ({ id }) => {
    this.props.onUpdate(id);
  }

  render() {
    const { selectedRowKeys } = this.state;
    const { list, pagination, loading } = this.props;

    /**
    big
    cover
    created_at
    id
    item
    label
    people
    price
    room_name
    space_name
    updated_at
    */
    const columns = [
      {
        title: '场地名称',
        dataIndex: 'room_name',
      },
      {
        title: '所在地址',
        dataIndex: 'address',
      },
      {
        title: '图片',
        dataIndex: 'cover',
      },
      {
        title: '容纳人数',
        dataIndex: 'people',
      },
      {
        title: '价格',
        dataIndex: 'price',
        render: val => <span>{val}¥</span>,
      },
      {
        title: '操作',
        render: room => (
          <div>
            <Link to={`/meeting-room/detail/${room.id}`}>详情</Link>
            <Divider type="vertical" />
            <span onClick={() => this.handleUpdateClick(room)}>修改</span>
            <Divider type="vertical" />
            <span onClick={() => this.handleRemoveClick(room)}>删除</span>
          </div>
        ),
      },
    ];

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.RoomListTable}>
        <div className={styles.tableAlert}>
          <Alert
            message={(
              <div>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
              </div>
            )}
            type="info"
            showIcon
          />
        </div>
        <Table
          loading={loading}
          rowKey={record => record.id}
          rowSelection={rowSelection}
          dataSource={list}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}

export default RoomListTable;
